<template>
	<view class="content">
		<view class="content_top">
			<image class="background-image" src="../../static/img/bg.png"></image>
			<view class="content_top_box">
				<view class="content_top_box_left">

					<view class="content_top_box_left_name">
						{{name}}
					</view>
				</view>
				<view class="content_top_box_right">

					<tn-avatar size="xl" @click="onImageClick(RLZP_FJ)" :src="RLZP_FJ"></tn-avatar>
				</view>
			</view>
		</view>
		<view class="content_bottom" :style="{ height: dynamicHeight }">
			<view class="content_bottom_success">
				<view class="container">
					<view class="content_bottom_success_icon">
						<image src="../../static/img/circle.png" mode="widthFix" style="width: 420rpx;"></image>
					</view>
					<view class="content_bottom_success_entry">
						<view class="content_bottom_success_entry_title">
							退场
						</view>
						<view class="content_bottom_success_entry_time">
							{{ currentDate }}
						</view>
					</view>
				</view>
				<view class="content_bottom_listBox">
						<view class="content_bottom_listBox_sear">
							<view class="content_bottom_xm_name">
								<view class="content_bottom_xm_name_left">
									项目名称：
								</view>
								<view class="content_bottom_xm_name_right">
									{{BIDDING_PROJECT_NAME}}
								</view>
							
							</view>
							<view class="content_bottom_xm_name">
								<view class="content_bottom_xm_name_left">
									分建单位名称：
								</view>
								<view class="content_bottom_xm_name_right">
									{{SUBPACKAGE_PROJECT_NAME}}
								</view>
							
							</view>
							<view class="content_bottom_xm_name">
								<view class="content_bottom_xm_name_left">
									分建联系人姓名：
								</view>
								<view class="content_bottom_xm_name_right">
									{{USER_NAME}}
								</view>
							
							</view>
							<view class="content_bottom_xm_name">
								<view class="content_bottom_xm_name_left">
									分建联系人电话：
								</view>
								<view class="content_bottom_xm_name_right">
									{{ PHONE_NUMBER }}
								</view>
							
							</view>
							
						</view>
						<view class="content_bottom_list_btn" @click="submit()">
							<span>提交</span>
						</view>
					
				</view>
				<!-- <view class="content_bottom_success_icon">
			    <image src="../../static/img/circle.png" mode="widthFix" style="width: 420rpx;"></image>
			  </view>
			  <view class="content_bottom_success_entry">
			    <view class="content_bottom_success_entry_title">
			      进场
			    </view>
			    <view class="content_bottom_success_entry_time">
			      2024-04-19
			    </view>
			  </view> -->
				<!-- <view class="content_bottom_success_title">
					<view class="content_bottom_success_title_img">
						<image src="../../static/img/error.png" mode="widthFix" style="width: 56rpx;"></image>
					</view>
					<view class="content_bottom_success_title_det">
						你的位置超出了限定距离
					</view>
				</view> -->
			</view>
			<view class="content_bottom_list">
			
			</view>
		</view>
	</view>
</template>

<script>
	import {
		BASE_URL
	} from '../../utils/request.js'
	export default {
		data() {
			return {
				PHONE_NUMBER: '',
				USER_NAME: '',
				PROJECT_NO: '',
				BIDDING_PROJECT_NAME: '',
				SUBPACKAGE_PROJECT_NAME: '',
				RLZP_FJ: '',
				name: '',
				dynamicHeight: '', // 默认高度样式

			}
		},
		computed: {
			currentDate() {
				// 返回当前日期的字符串表示（YYYY-MM-DD）
				return new Date().toISOString().split('T')[0];
			}
		},
		onLoad(option) {
			this.name = uni.getStorageSync('USER_NAME');
			this.RLZP_FJ = BASE_URL + '/portal/r' + uni.getStorageSync('lwphoto').slice(1);
			uni.getSystemInfo({
				success: (info) => {
					if (info.screenHeight < 667) { // 假设iPhone X的高度是812像素
						this.dynamicHeight = 'calc(100% + 200rpx)'; // 如果设备高度小于iPhone X，则添加额外的200rpx
					}else{
							this.dynamicHeight = 'calc(100% - 200rpx)';
					}
				},
			});
			if (option.data) {
				let a = JSON.parse(option.data);
				console.log(a,'a')
				
				this.PROJECT_NO = a.PROJECT_NO;
				this.getXMdetail();
				// this.BIDDING_PROJECT_NAME = a.BIDDING_PROJECT_NAME;
				// this.SUBPACKAGE_PROJECT_NAME = a.SUBPACKAGE_PROJECT_NAME;

				// this.PHONE_NUMBER = a.PHONE_NUMBER;
				// this.USER_NAME = a.USER_NAME;
			// }
			}
		},
		methods: {
			async getXMdetail() {
			
				try {
					const url = '/portal/r/w'; // 替换为你的 API 地址
					const params = {
						// 构造你的请求参数
						sid: uni.getStorageSync('SID'),
						cmd: 'sfeg.srm.workers.join.apply.isFirstApproach',
						openId: uni.getStorageSync('OPEN_ID'),
						buyingTaskNo: this.PROJECT_NO
					};
			
					// 发送 POST 请求
					const response = await this.$get(url, params);
			
					// 处理请求成功的逻辑
					console.log('请求成功个人数据', response);
			this.BIDDING_PROJECT_NAME = response.data.BIDDING_PROJECT_NAME;
			this.SUBPACKAGE_PROJECT_NAME = response.data.SUBPACKAGE_PROJECT_NAME;
			
			this.PHONE_NUMBER = response.data.PHONE_NUMBER;
			this.USER_NAME = response.data.USER_NAME;
			
				} catch (error) {
					// 处理请求失败的逻辑
					console.error('请求失败', error);
				}
			},

			async submit() {

				try {
					const url = '/portal/r/w'; // 替换为你的 API 地址
					const params = {
						// 构造你的请求参数
						sid: uni.getStorageSync('SID'),
						cmd: 'sfeg.srm.workers.join.apply.personnelExit',
						openId: uni.getStorageSync('OPEN_ID'),
						uaInfo: '809653211',
						buyingTaskNo: this.PROJECT_NO,
						phone:uni.getStorageSync('phoneNumber')
					};

					// 发送 POST 请求
					const response = await this.$get(url, params);

					// 处理请求成功的逻辑
					console.log('请求成功个人数据111', response);
					if (response.result == 'ok') {
						uni.navigateTo({
							url: '../entrySuccess/entrySuccess?type=1'
						});
					}

				} catch (error) {
					// 处理请求失败的逻辑
					console.error('请求失败', error);
				}

				// uni.navigateTo({
				// 	url: '../entrySuccess/entrySuccess'
				// });
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		/* 占据整个视口高度 */
		display: flex;
		flex-direction: column;
		position: relative;
		/* 相对定位，以便子元素可以相对于它定位 */
	}

	.content_top {

		position: relative;
		/* 设置相对定位，以便子元素可以相对于它定位 */
		width: 100%;
		/* 宽度百分之百 */
		height: 500rpx;
		/* 设置高度 */
		overflow: hidden;

		/* 触发 BFC */
		.background-image {
			position: absolute;
			/* 设置绝对定位，让背景图充满整个父容器 */
			top: 0;
			left: 0;
			width: 100%;
			/* 宽度百分之百 */
			height: 100%;
			/* 高度百分之百 */
			object-fit: cover;
			/* 图片填充父容器 */
			z-index: -1;
			/* 将背景图放到底层 */
		}

		.content_top_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 33rpx 73rpx 0 73rpx;

			.content_top_box_left {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 48rpx;
				color: #FFFFFF;
			}

			.content_top_box_right {}
		}
	}

	.content_bottom {
		flex: 1;
		/* 自动填充剩余空间 */
		position: absolute;
		/* 绝对定位，覆盖在 .content_top 上方 */
		top: 200rpx;
		/* 位于父容器顶部下方 200rpx 处 */
		width: 100%;
		/* 宽度百分之百 */
		height: calc(100% - 200rpx);
		/* 高度占满父容器下方 */
		background-color: #F8F9FD;
		/* 背景色，可根据需要修改 */
		z-index: 0;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;

		/* 确保在 content_top 之下 */
		// display: flex;
		// justify-content: center;
		// align-items: center;
		.content_bottom_success {
			margin-top: 100rpx;

			text-align: center;
			position: relative;

		}

		.container {

			position: absolute;

			left: 50%;
			transform: translateX(-50%);
		}

		.content_bottom_success_icon {
			position: relative;
			width: 420rpx;
			height: auto;
			/* 样式调整 */
		}

		.content_bottom_success_entry {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			/* 文本居中对齐 */
			color: #fff;
			/* 文本颜色，可根据需要调整 */
			width: 100%;
			/* 样式调整 */
		}

		.content_bottom_success_entry_title {
			margin-bottom: 24rpx;
		}

		.content_bottom_success_entry_title,
		.content_bottom_success_entry_time {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 48rpx;
			color: #FFFFFF;
			/* 样式调整 */
		}

		.content_bottom_success_title {
			display: flex;
			justify-content: center;
			/* text-align: center; */
			align-items: center;
			margin-top: 88rpx;

			.content_bottom_success_title_det {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 48rpx;
				color: #FF2D2D;
				margin-left: 26rpx;
			}
		}

		.content_bottom_list {
			position: absolute;
			bottom: 83rpx;
			left: 5%;

			.content_bottom_list_btn {
				text-align: center;

				span {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 40rpx;
					color: #FFFFFF;
					background: linear-gradient(90deg, #3A84FD 0%, #536AFF 100%);
					border-radius: 20rpx;
					padding: 25rpx 300rpx;
				}
			}
		}




	}

	.content_bottom_listBox {
		position: absolute;
		top: 500rpx;
		padding-bottom: 80rpx;
		left: 50%;
		width: 90%;
		transform: translateX(-50%);
		
		.content_bottom_listBox_sear{
			background: #FFFFFF;
			box-shadow: 0rpx 7rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 30rpx;
			padding: 33rpx;
		}
		.content_bottom_list_btn {
			text-align: center;
			    margin-top: 51rpx;
		
			span {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #FFFFFF;
				background: linear-gradient(90deg, #3A84FD 0%, #536AFF 100%);
				border-radius: 20rpx;
				padding: 25rpx 280rpx;
			}
		}
	}

	.content_bottom_xm_name {
		display: flex;
		margin-top: 10rpx;
		justify-content: space-between;

		.content_bottom_xm_name_left {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #333333;
			flex: 0 0 50%;
			text-align: left;
		}

		.content_bottom_xm_name_right {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #999999;
			flex: 0 0 50%;
			text-align: right;
		}
	}
</style>